<template>
	<view class="form-container" style="border: 2rpx solid black;">

		<carHeader :title="'申请提现'"></carHeader>

		<view class="rongqi">
			<view class="rongqi1">
				<view class="form-item">
					<view style="width: 220rpx;">
						账户余额 :
					</view>
					<view style="margin-left:10rpx; color: red; font-weight: 700;">
						￥ {{balance}}
					</view>
				</view>
				<view class="form-item">
					<text class="label">提现金额 :</text>
					<input class="input1" type="number" v-model="paramy.money" placeholder-style="color: #ccc" />
					<text class="unit">元</text>
				</view>
				<view class="form-item">
					<text class="label">真实姓名 :</text>
					<input class="input2" v-model="paramy.name" placeholder-style="color: #ccc" />
				</view>
				<view class="form-item">
					<text class="label">请选择银行:</text>
					<picker class="picker" mode="selector" :range="bankOptions" range-key="label" v-model="paramy.back"
						@change="handleBankChange">
						<view class="picker-value" :class="{ 'picker-placeholder': !paramy.back }">
							{{ paramy.back || ' 请选择银行' }}
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">请输入银行卡号 :</text>
					<input class="input3" v-model="paramy.backNumber" placeholder-style="color: #ccc" />
				</view>
				<view style="font-size: 18rpx; text-align: center; color: #b4b4b4;">
					车联网服务平台不会通过任何渠道泄露您的个人信息,请放心填写
				</view>
				<view style="height: 120rpx;">
					<button class="submit-button" @click="commit">确认信息并提交</button>
				</view>
			</view>
		</view>

		<view class="rongqi2">
			<view class="jilu">
				提现记录
			</view>

			<view class="xiangqing" v-for="item in List" :key="item">
				<view class="" style="margin-top: 10rpx; font-size: 30rpx; line-height: 50rpx;">
					<view class="a1" style="font-weight: 600;">
						提现申请
					</view>
					<view class="a2" style="font-size: 20rpx; color: #b4b4b4;">
						核销时间:{{item.withdrawalTime}}
					</view>
				</view>
				<view class="" style="margin-top: 10rpx; width: 130rpx;">
					<view class="a3" style="color: red;">
						- {{item.cashWithdrawal}}
					</view>
					<view class="a4" style="color: #b4b4b4;">
						<text v-if="item.status === 1">提现成功</text>
						<text v-if="item.status === 2">提现失败</text>
						<text v-if="item.status === 0">审核中</text>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				List: [],
				// shopId: 1,
				balance: 0,
				// 今日日期
				date: null,
				// 详细填写的参数
				paramy: {
					money: null,
					name: null,
					back: null,
					backNumber: null,
				},
				bankOptions: [{
						value: 'ICBC',
						label: '工商银行'
					},
					{
						value: 'CMB',
						label: '招商银行'
					},
					{
						value: 'ABC',
						label: '农业银行'
					}
				],
				items: [{
						money: '100.00',
						time: '2022-10-12 11 : 09',
						statis: '审核中'
					},
					{
						money: '100.00',
						time: '2022-10-12 11 : 09',
						statis: '审核中'
					}
				]
			};
		},
		onLoad(option) {
			console.log(option.balance);
			this.balance = option.balance;
			this.getdataTime();
			this.getList();
		},
		methods: {
			// 获取提现记录数据
			getList() {
				uni.request({
					url: "http://localhost:8080/carShop/shopStatistics/getWithdrawalList",
					method: "GET",
					success: (res) => {
						console.log(res.data.data);
						this.List = res.data.data;
					}
				})
			},
			handleBankChange(e) {
				this.paramy.back = this.bankOptions[e.mp.detail.value].label;
			},
			// 获取当前系统日期
			getdataTime() {
				let wk = new Date().getDay()
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				// let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				let hh = new Date().getHours();
				let mf =
					new Date().getMinutes() < 10 ?
					"0" + new Date().getMinutes() :
					new Date().getMinutes();
				let ss =
					new Date().getSeconds() < 10 ?
					"0" + new Date().getSeconds() :
					new Date().getSeconds();
				let time = hh + ":" + mf + ":" + ss;
				this.date = yy + "-" + mm + "-" + dd + " " + time;
			},
			// 获取当前系统的时间
			// getnewTime() {
			// 	let hh = new Date().getHours();
			// 	let mf =
			// 		new Date().getMinutes() < 10 ?
			// 		"0" + new Date().getMinutes() :
			// 		new Date().getMinutes();
			// 	let ss =
			// 		new Date().getSeconds() < 10 ?
			// 		"0" + new Date().getSeconds() :
			// 		new Date().getSeconds();
			// 	this.time.time = hh + ":" + mf + ":" + ss;
			// },
			commit() {
				if (Number(this.paramy.money) > Number(this.balance)) {
					console.log(Number(this.paramy.money));
					console.log(Number(this.balance));
					console.log("账户余额不足！！！");
				} else if (this.paramy.name == null) {
					console.log("请填写真实姓名");
				} else if (this.paramy.back == null) {
					console.log("请选择银行");
				} else if (this.paramy.backNumber == null) {
					console.log("请填写银行卡号");
				} else {
					console.log(this.paramy);
					uni.request({
						url: "http://localhost:8080/carShop/shopStatistics/addWithdrawal",
						method: "POST",
						data: {
							// merchantId: this.shopId,
							currentBalance: this.balance - this.paramy.money,
							cashWithdrawal: this.paramy.money,
							realName: this.paramy.name,
							bankCardNumber: this.paramy.backNumber,
							back: this.paramy.back,
							withdrawalTime: this.date,
						},
						header: {
							"Access-Control-Allow-Origin": "*"
						},
						success: (res) => {
							console.log(res);
						}
					})
					uni.navigateTo({
						url: "/pages/jiesuan/jiesuan"
					})
				}
				
				
			}
		}
	};
</script>

<style>
	input {
		padding-left: 20rpx;
	}

	.rongqi {
		width: 94%;
		margin-left: 3%;
		background-color: white;
		position: relative;
		top: -270rpx;
		border-radius: 45rpx;
	}

	.rongqi1 {
		width: 90%;
		/* border: 5rpx solid black; */
		margin-left: 30rpx;
		padding-top: 10rpx;
		/* background-color: #ccc; */
		border-radius: 45rpx;
	}

	.form-item {
		height: 60rpx;
		/* background-color: #0055ff; */
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	.label {
		width: 220rpx;
		font-size: 26rpx;
		align-items: center;
		line-height: 60rpx;
		/* background-color: #00ff00; */

	}

	.input1,
	.input2,
	.input3 {
		width: 300rpx;
		height: 60rpx;
		border: 2rpx solid #eee;
		border-radius: 5rpx;
		/* margin-left: 50rpx; */
		border: 1px solid #ccc;
	}

	.input1 {
		width: 250rpx;
	}


	.unit {
		margin-left: 10rpx;
	}

	.picker-value {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;

		position: relative;
		/* padding-right: 20rpx; */
		/* 为下拉箭头留出空间 */
	}

	.picker-placeholder {
		color: #ccc;
	}

	.picker-value::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 55rpx;
		transform: translateY(-50%);
		border-left: 5rpx solid transparent;
		border-right: 5rpx solid transparent;
		border-top: 10rpx solid #ccc;
	}

	.submit-button {
		width: 70%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #0055ff;
		color: #fff;
		font-size: 26rpx;
		margin-top: 30rpx;
		border-radius: 45rpx;
	}

	.jilu {
		width: 90%;
		height: 70rpx;
		border-bottom: 3rpx solid #eee;
		line-height: 70rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 10rpx;
	}

	.rongqi2 {
		width: 94%;
		margin-left: 3%;
		background-color: white;
		border-radius: 40rpx;
		position: relative;
		top: -260rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.xiangqing {
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-top: 4rpx solid #eee;
	}
</style>